<!-- 物流服务介绍组件 -->
<template>
    <div class="main">
        <div class="title">
            <div>
                <div>
                    快递服务介绍
                </div>
            </div>
        </div>
        <div class="content">
            <div class="nav">
                <ul>
                    <li v-for="item in serviceName" :key="item.id" :class="{ active: isActive === item.id }"
                        @click="changeClass(item.id)">
                        <div>
                            {{ item.name }}
                        </div>
                    </li>
                </ul>
            </div>
            <div class="specific">
                <div class="leftimg">
                    <div>
                        <img :src="IntroImages[0].url" alt="">
                    </div>
                    <div>
                        <div>飞鸟特快</div>
                        <div>
                            <div>为您提供"快速、准时、稳定"的高品质、门到门的标准快递服务</div>
                        </div>
                    </div>
                </div>
                <div class="rightimg">
                    <div>
                        <img :src="IntroImages[1].url" alt="">
                    </div>
                    <div>
                        <div>飞鸟标快</div>
                        <div>
                            <div>为您提供"价格更优、时效稳定、托寄无忧、服务范围广"的门到门的标准快递服务</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import {Quick} from "@/common/common"

interface Service {
  id: number;
  name: string;
}
interface IntroImage{
    id: number;
    url: string;
}
let serviceName = reactive<Service[]>([
    { id: 1, name: '快递服务' },
    { id: 2, name: '快运服务' },
    { id: 3, name: '冷运服务' },
    { id: 4, name: '医药服务' },
    { id: 5, name: '国际服务' }
])
let isActive = ref<number>(1);
let IntroImages = reactive<IntroImage[]>([
    { id: 1, url: Quick.url1 },
    { id: 2, url: Quick.url2 },
])
function changeClass(index: number) {
    isActive.value = index;
}
</script>

<style scoped lang="less">
.main {
    height: 95vh;
    display: flex;
    flex-direction: column;

    .title {
        width: 100%;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        >div {
            display: flex;
            justify-content: center;
            align-items: center;

            >div {
                font-weight: 700;
                font-size: 2rem;
                color: #333;
            }

        }
    }

    .content {
        width: 100%;
        flex: 3;
        display: flex;
        flex-direction: column;

        .nav {
            border-bottom: 1px solid #f2f2f2;
            flex: 1;

            ul {
                
                height: 100%;
                width: 40rem;
                margin: 0 auto;
                display: flex;
                justify-content: space-around;
                align-items: center;
                background-color: white;

                li {
                    list-style-type: none;
                    display: flex;
                    justify-content: space-around;
                    align-items: flex-start;
                    font-size: 1rem;
                    height: 30%;
                    color: #949494;
                    text-align: center;
                    div{
                        padding-bottom: 2px;
                    }
                    &:hover {
                        cursor: pointer;
                        color: red;
                    }
                }

                .active {
                    border-bottom: 2px solid red;
                }
            }
        }

        .specific {
            flex: 4;
            display: flex;
            justify-content: space-evenly;
            .leftimg {
                width: 40%;
                height: 90%;
                margin: 5px 10px 0 10px;
                box-shadow: 0 0 1px;
                display: flex;
                flex-direction: column;

                >div:first-child {
                    flex: 3;
                    background-color: black;
                    overflow: hidden;

                    /* 保证图片不溢出父级div */
                    >img {
                        width: 100%;
                        height: 100%;
                        /* 图片高度为100% */
                        object-fit: cover;
                        /* 保持图片比例并裁剪以填充整个容器 */
                    }
                }

                >div:nth-child(2) {
                    flex: 1;
                    display: flex;
                    flex-direction: column;

                    >div:first-child {
                        flex: 1;
                        width: 100%;
                        font-size: 1rem;
                        height: 50%;
                        color: black;
                        font-weight: 550;
                        padding-left: 10px;
                        padding-top: 10px;
                    }

                    >div:nth-child(2) {
                        flex: 1;
                        width: 100%;

                        >div {
                            font-size: 0.8rem;
                            height: 50%;
                            color: #949494;
                            padding-left: 10px;
                        }
                    }
                }
            }

            .rightimg {
                width: 40%;
                height: 90%;
                margin: 5px 10px 0 10px;
                box-shadow: 0 0 1px;
                display: flex;
                flex-direction: column;

                >div:first-child {
                    flex: 3;
                    background-color: black;
                    overflow: hidden;

                    /* 保证图片不溢出父级div */
                    >img {
                        width: 100%;
                        height: 100%;
                        /* 图片高度为100% */
                        object-fit: cover;
                        /* 保持图片比例并裁剪以填充整个容器 */
                    }
                }

                >div:nth-child(2) {
                    flex: 1;
                    display: flex;
                    flex-direction: column;

                    >div:first-child {
                        flex: 1;
                        width: 100%;
                        font-size: 1rem;
                        height: 50%;
                        color: black;
                        font-weight: 550;
                        padding-left: 10px;
                        padding-top: 10px;
                    }

                    >div:nth-child(2) {
                        flex: 1;
                        width: 100%;

                        >div {
                            font-size: 0.8rem;
                            height: 50%;
                            color: #949494;
                            padding-left: 10px;
                        }
                    }
                }
            }
        }
    }
}</style>